<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甜蜜相册 - 甜蜜空间</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/album.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 添加Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <h1><i class="fas fa-heart"></i> 甜蜜空间</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="album.html" class="active">相册</a></li>
                    <li><a href="diary.html">日志</a></li>
                    <li><a href="memory.html">纪念日</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="album-header">
        <div class="container">
            <h2>我们的甜蜜相册</h2>
            <p>每一张照片都是美好的回忆，每一个瞬间都值得珍藏</p>
            <div class="album-controls">
                <button id="upload-btn" class="btn btn-primary"><i class="fas fa-upload"></i> 上传照片</button>
                <input type="file" id="file-upload" accept="image/*" multiple style="display: none;">
                <div class="album-filter">
                    <select id="album-category">
                        <option value="all">所有相册</option>
                        <option value="travel">旅行</option>
                        <option value="date">约会</option>
                        <option value="daily">日常</option>
                        <option value="special">特别日子</option>
                    </select>
                </div>
            </div>
        </div>
    </section>

    <section class="album-categories">
        <div class="container">
            <div class="category-tabs">
                <button class="category-tab active" data-category="all">全部</button>
                <button class="category-tab" data-category="travel">旅行</button>
                <button class="category-tab" data-category="date">约会</button>
                <button class="category-tab" data-category="daily">日常</button>
                <button class="category-tab" data-category="special">特别日子</button>
            </div>
            
            <div class="albums-container">
                <div class="albums-grid">
                    <!-- 相册卡片将由JavaScript动态添加 -->
                </div>
            </div>
        </div>
    </section>

    <div id="photo-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="modal-body">
                <div class="photo-container">
                    <img id="modal-img" src="" alt="照片大图">
                </div>
                <div class="photo-info">
                    <div class="photo-actions">
                        <button class="btn-like"><i class="fas fa-heart"></i> <span>88</span></button>
                        <button class="btn-download"><i class="fas fa-download"></i></button>
                        <button class="btn-delete"><i class="fas fa-trash"></i></button>
                    </div>
                    <div class="photo-details">
                        <h3 id="photo-title">照片标题</h3>
                        <p id="photo-date">拍摄日期：2023年7月15日</p>
                        <p id="photo-description">照片描述将显示在这里，可以添加照片的详细信息和回忆...</p>
                    </div>
                    <div class="photo-comments">
                        <h4>留言 (2)</h4>
                        <div class="comments-list">
                            <div class="comment">
                                <div class="comment-avatar">
                                    <img src="img/couples/boy.jpg" alt="小明">
                                </div>
                                <div class="comment-content">
                                    <h5>小明</h5>
                                    <p>那天天气真好，希望能再去一次！</p>
                                    <span class="comment-date">2023年7月16日</span>
                                </div>
                            </div>
                            <div class="comment">
                                <div class="comment-avatar">
                                    <img src="img/couples/girl.jpg" alt="小红">
                                </div>
                                <div class="comment-content">
                                    <h5>小红</h5>
                                    <p>下次我们可以去更远的海滩~</p>
                                    <span class="comment-date">2023年7月16日</span>
                                </div>
                            </div>
                        </div>
                        <div class="add-comment">
                            <textarea placeholder="添加留言..."></textarea>
                            <button class="btn btn-primary">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2023 甜蜜空间 - 你我的专属恋爱天地</p>
            <p>一起创造更多美好回忆</p>
        </div>
    </footer>

    <!-- 引入Bootstrap和数据加载相关脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/data-loader.js"></script>
    <script src="js/upload-manager.js"></script>
    <script src="js/album-editor.js"></script>
    <script src="js/album.js"></script>
</body>
</html> 